import React, {memo} from 'react'
import {addNumberAction,subNumberAction} from "./store/modules/counter";

import {connect} from "react-redux"

const App = memo((props) => {

    const {count, addNumber, subNumber} = props

    function numberHandler(num, isAdd = true) {
        if (isAdd) {
            addNumber(num)
        } else {
            subNumber(num)
        }
    }
    return (
        <div>
            <h2>当前计数:{count}</h2>
            <button onClick={() => numberHandler(1)}>+1</button>
            <button onClick={() => numberHandler(1, false)}>-1</button>
        </div>
    )
})


const mapStateToProps = (state) => {
    return {count: state.counterReducerStore.count}
}
const mapDispatchToProps = (dispatch) => ({
    addNumber(num) {
        dispatch(addNumberAction(num))
    },
    subNumber(num) {
        dispatch(subNumberAction(num))
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(App)